{% extends 'base.html' %}
{% block title %}
<title>首页</title>
{% endblock %}
{% block body %}
<div>
    {% for c in cs %}
        {{ c.title }}
    {% endfor %}

    <!-- Nav tabs -->
    <div class="row">
        <div class="col-sm-9">
            <ul class="nav nav-tabs" role="tablist">
                {% for c in cs %}
                    {% if forloop.first %}
                        <li role="presentation" class="active"><a href="#tab_{{ c.title }}" aria-controls="tab_{{ c.title }}" role="tab"
                                                          data-toggle="tab">{{ c.title }}</a></li>
                    {% else %}
                        <li role="presentation"><a href="#tab_{{ c.title }}" aria-controls="tab_{{ c.title }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>
                    {% endif %}
                {% endfor %}
            </ul>
            <div class="tab-content">
                {% for c in cs %}
                    {% if forloop.first %}
                        <div role="tabpanel" class="tab-pane active" id="tab_{{ c.title }}">
                            {% for b in c.book_set.all %}
                            <a href="/detail/{{ b.id }}">{{ b.title }}</a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div role="tabpanel" class="tab-pane" id="tab_{{ c.title }}">
                            {% for b in c.book_set.all %}
                            <a href="/detail/{{ b.id }}">{{ b.title }}</a>
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

        </div>
        <div class="col-sm-9">

                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                          {% for ads in adss %}
                          {% if forloop.first %}
                          <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
                          {% else %}
                          <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"></li>
                          {% endif %}
                          {% endfor %}


                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                          {% for ads in adss %}
                          {% if forloop.first %}
                          <div class="item active">
                          {% else %}
                          <div class="item">
                          {% endif %}
                              <img src="/media/{{ ads.img }}" alt="...">
                              <div class="carousel-caption">
                                  {{ ads.title }}
                              </div>
                            </div>
                          {% endfor %}
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}